@extends('WShop::layout')
@section('content')
    @include('WShop::public.header',['attr'=>'style=background:rgba(0,0,0,.25);'])
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">

            <div class="mui-table-view mui-table-view-chevron mui-bottom">
                <div class="mui-content">
                    <!--轮播图片-->
                    <div id="Topslider" class="mui-slider bg-fff">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                @foreach(str2arr($goods->goods_images) as $img)
                                <div class="swiper-slide"><img src="{{$img}}" ></div>
                                 @endforeach
                            </div>
                            <div class="swiper-pagination fenye"></div>
                        </div>
                    </div>
                    <div class="bg-fff mui-miaoshu">
                        <div class="mui-xq-miaoshu bg-fff">
                            <h5><span class="baoyou">{{config('shop.post_type')[$goods->post_type]}}</span>{{$goods->goods_name}}</h5>
                            <p class="mui-ellipsis">{{$goods->description}}</p>
                            <p class="color">¥ <span>  @if($level > 0){{$goods->vip_price}}@else{{$goods->price}}@endif</span><del style="color: darkgrey;height:16px;line-height: 16px;padding-left: 10px;font-size: 12px; white-space: nowrap;overflow: hidden;">¥ {{$goods->market_price}}</del>
                                <span class="mui-pull-right">已售：{{$goods->show_sales_volume}}件</span></p>
                        </div>
                    </div>

                    <div class="mui-xq-pingjia bg-fff">

                        <div class="mui-pingjia-center">
                            <div class="mui-input-group">
                                <div class="mui-input-row flex">
                                    <label>品名</label>
                                    <span>{{$goods->goods_name}}</span>
                                </div>
                                <div class="mui-input-row flex">
                                    <label>零售价</label>
                                    <span>{{$goods->price}}</span>
                                </div>
{{--                                @if($level > 0)--}}
{{--                                    <div class="mui-input-row flex">--}}
{{--                                        <label>会员价</label>--}}
{{--                                        <span>{{$goods->vip_price}}</span>--}}
{{--                                    </div>--}}
{{--                                    @else--}}
{{--                                <div class="mui-input-row flex">--}}
{{--                                    <label>零售价</label>--}}
{{--                                    <span>{{$goods->price}}</span>--}}
{{--                                </div>--}}
{{--                                @endif--}}
                                <div class="mui-input-row flex">
                                    <label>市场价</label>
                                    <span>{{$goods->market_price}}</span>
                                </div>
                                <div class="mui-input-row flex">
                                    <label>是否包邮</label>
                                    <span>
                                        {{config('shop.post_type')[$goods->post_type]}}
                                    </span>
                                </div>
                                @if($goods->post_type!=1&&$goods->postage>0)
                                <div class="mui-input-row flex">
                                    <label>邮费</label>
                                    <span>
                                        大约{{$goods->postage}}元
                                    </span>
                                </div>
                                @endif
                                @if(isset($goods->type))
                                <div class="mui-input-row flex">
                                    <label>商品类型</label>
                                    <span>{{$goods->type->name ?? ''}}</span>
                                </div>
                                @endif
                                <div class="mui-input-row flex" style="height: auto;">
                                    <label>商品介绍</label>
                                    <span style="width: 65%;padding-bottom: 10px;padding-right: 10px;">{{$goods->description}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="mui-pingjia-center">
                            {!! $goods->wp_detail !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer1 flex">

        <div @if( in_array($goods->goods_zone,[1,2])) style="display: none" @endif class="footer1-left flex-item" id="btn_Tab_GoPingdan" data-action="{{route('f_Wap_Cart_create')}}">
            <div class="footer1-left-icon">
                <a href='javascript:;' class="footer1-left-money">加入购物车</a>
            </div>
        </div>

        <div  class="footer1-right flex-item" id="btn_tab_buy" data-action="{{route('f_Wap_Order_buyOrder')}}">
            <div class="footer1-left-icon">
                <a href='javascript:;' class="footer1-left-money">立即购买</a>
            </div>

        </div>
    </div>

    <div id="sheet3" class="mui-popover mui-popover-bottom mui-popover-action ">

        <img class="goPingdanImg" src="{{str2arr($goods->goods_images)[0]}}" />
        <div class="goPingdanDiv">
            <div class="goPingdanMoney mui-ellipsis-2">{{$goods->goods_name}}</div>
            <div class=" goPingdanSelectKuanshi color1 price" style="font-size: 16px">￥
                {{$goods->price}}
{{--                @if($level >0)--}}
{{--                    {{$goods->vip_price}}--}}
{{--                @else--}}
{{--                    {{$goods->price}}--}}
{{--                @endif--}}
            </div>
            <div><del class="market_price" style="font-size: 12px;color: silver">￥{{$goods->market_price}}</del></div>
            <div style="float:right;margin-top: -20px;font-size: 12px;">库存<em class="stock" style="color: #FF0036 !important">{{$goods->stock}}</em>件</div>
        </div>
        @if($goods->specs)
            @foreach($goods->specs as $key=>$specs)
            <div class="goPingdanKuanshi">
                <div style="float: left;width: 100%;font-size: 14px;padding-top: 10px;padding-left: 10px;">{{$specs->title}}</div>
                @foreach(str2arr($specs->value) as $value)
                    <div class="goPingdanKuanshiItem @if($loop->index == 0) mui-active @endif">{{$value}}
                        <input type="radio" name="specs{{$key}}" value="{{$value}}" @if($loop->index == 0) checked @endif />
                    </div>
                @endforeach
            </div>
            @endforeach
        @endif
        <div class="goPingdanKuanshi mui-bottom">
            <div style="float: left;width: 100%;font-size: 14px;padding-top: 10px;padding-left: 10px;">数量</div>
            <div class="goPingdanNumFontOperation">
                <div  class="goPingdanNumDel">-</div>
                <div  class="goPingdanNumContent" id="goodNumber">1</div>
                <div  class="goPingdanNumAdd">+</div>
            </div>
        </div>
        <div class="goPingdanBtnDiv-di" id="submit-btn" data-goodsid = "{{$goods->goods_id}}">
            <div class="goPingdanBtnDiv flex">
                <div class="flex-item goPingdanBtn">确定</div>
            </div>
        </div>
        <form method="post" id="submit-from" action="{{route('f_Wap_Order_buyOrder')}}" data-type="1">
            {{csrf_field()}}
            <input type="hidden" name="goods_id" value="{{$goods->goods_id}}">
            <input type="hidden" name="goods_zone" value="{{$goods->goods_zone}}">
            <input type="hidden" name="buy_number" value="">
            <input type="hidden" name="goods_specs" value="">
        </form>
    </div>

    <!--以下div勿删 定位使用-->
    <div id="div"></div>
@endsection
@push('scripts')
    <script src="{{asset(config('view.frontend.wap_login').'/js/mui.zoom.js')}}"></script>
    <script src="{{asset(config('view.frontend.wap_login').'/js/mui.previewimage.js')}}"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination : '.swiper-pagination',
            paginationType : 'fraction',
            autoplay : 5000,
            speed:500,
        });
    </script>
    <script>
        mui.init();
//        mui('#pullrefresh').scroll({
//            bounce: true,
//            indicators: true,
//            deceleration: mui.os.ios ? 0.003 : 0.0009
//        });
        mui.previewImage();

        var btn=$('.goPingdanKuanshi .goPingdanKuanshiItem')
        for(var i=0;i<btn.length;i++){
            btn[i].addEventListener('tap',function(){
                $(this).addClass('mui-active').siblings().removeClass('mui-active')
                change_price();
            })
        }
        var goPingdanNumDel =$('.goPingdanNumDel')
        for(var a=0;a<goPingdanNumDel.length;a++){
            goPingdanNumDel[a].addEventListener('tap',function(){
                var num= $(this).next().text()
                if(num<=0){
                    mui.toast('数量不能小于1')
                    return false
                }
                num=parseFloat(num)-1;
                $(this).next().text(num)
            })
        }
        var goPingdanNumAdd =$('.goPingdanNumAdd')
        for(var b=0;b<goPingdanNumAdd.length;b++){
            goPingdanNumAdd[b].addEventListener('tap',function(){
                var num= $(this).prev().text()
                num=parseFloat(num)+1;
                var stock =   $("#sheet3 .goPingdanDiv .stock").text();
                if(num > parseInt(stock)){
                    mui.toast('库存不足')
                    $(this).prev().text(stock)
                    return false
                }
                $(this).prev().text(num)
            })
        }

        //加入购物车
        document.getElementById("btn_Tab_GoPingdan").addEventListener("tap", function() {
            mui('#sheet3').popover('toggle');
            $("#submit-from").attr('action',$(this).data('action'));
            $("#submit-from").data('type',1);
        })

        //立即购买
        document.getElementById("btn_tab_buy").addEventListener("tap", function() {
            mui('#sheet3').popover('toggle');
            $("#submit-from").attr('action',$(this).data('action'));
            $("#submit-from").data('type',2);
        });
        document.getElementById("submit-btn").addEventListener("tap", function() {

           if($("input[name^='specs'][type='radio']").length>0){
               var specs = [];
               $("input[name^='specs'][type='radio']:checked").each(function () {
                   specs.push($(this).val());
               });
               if(specs.length<1){
                   mui.toast('请选择要购买的商品规格');
                   return false;
               }
               specs = specs.join(',');
               $("#submit-from>input[name='goods_specs']").val(specs);
           }

            var number = parseInt($('#goodNumber').text());
               if(number <= 0){
                   mui.toast('请选择要购买的商品的数量');
                   return false;
               }
           $("#submit-from>input[name='buy_number']").val(number);

            if($('#submit-from').data('type')==2){
                $('#submit-from').submit();
            }else{
                new shopAjax({
                    url:$('#submit-from').attr('action'),
                    data:$('#submit-from').serialize(),
                    callback:function (response) {
                        mui.toast('添加购物车成功');
                        setTimeout(function () {
                            mui('#sheet3').popover('toggle');
                        }, 2000);
                    }
                }).ajax();
            }
        });
    </script>
    <script type="text/javascript">
        $(function () {
            change_price();
        })
    </script>
    <script type="text/javascript">
        function change_price() {
            if($("#sheet3 .mui-active input").length <=0){
                return false ;
            }
            var level = "{{$level}}"

            var goods_id = $("input[name='goods_id']").val() ;

            var specs = [];

            $('#sheet3 .mui-active input').each(function(){
                specs.push($(this).val());
            });

            if(specs.length<1){
                return false;
            }
            specs = specs.join(',');

            $.ajax({
                type: 'post',
                url: "{{route('f_Wap_Goods_get_spec')}}",
                dataType: 'json',
                data:{'goods_id':goods_id,'goods_spec':encodeURI(specs),'_token':'{{csrf_token()}}'},
            }).done(function (response) {
               if(response.status>0){
                   $("#sheet3 .goPingdanDiv .market_price").html('￥'+response.data.market_price);
                   $("#sheet3 .goPingdanDiv .stock").html(response.data.stock);
                   if(parseInt(level) > 0){
                       $("#sheet3 .goPingdanDiv .price").html('￥'+response.data.vip_price);
                   }else{
                       $("#sheet3 .goPingdanDiv .price").html('￥'+response.data.price);
                   }
               }
            }).fail(function (XMLHttpRequest) {
                if (XMLHttpRequest.status == 422) {
                    var errors = XMLHttpRequest.responseJSON.errors;
                    if(typeof errors == 'object') {
                        for (var index in errors) { // 不推荐这样
                            mui.toast(errors[index][0]);
                            break;
                        }
                    }else{
                        mui.toast(XMLHttpRequest.responseJSON.msg);
                    }
                }else{
                    mui.toast('网络异常,请检查连接');
                }

            }).always(function () {

            });
        }
    </script>
@endpush